<template>
    <div>
        <el-container>
            <el-header style="background-color: #4a4c5b;" >
                <div style="display:flex;justify-content:flex-end;align-items:center;height:100%;width:99%" >
                    <i class="iconfont icon1 pointer" style="font-size:25px;color:#fff"></i><span style="font-size:20px;color:#fff" class="pointer"> 返回首页</span>
                </div>
            </el-header>
            <el-main id="loginMainBox" style="padding-top: 20px;" class="imgCol">
                <el-card style="width:500px">
                    <el-steps :active="activeStep" align-center>
                            <el-step title="重新设置密码" ></el-step>
                            <el-step title="前往邮箱确认"></el-step>
                            <!-- <el-step title="重新设置密码"></el-step> -->
                    </el-steps>
                    <div class="imgCol" style="margin-top:40px">
                        <div style="width:400px">
                                        <el-form :model="form" status-icon :rules="rules" ref="form" >
                                            <el-form-item  prop="email">
                                                <el-input v-model="form.email" placeholder="请输入邮箱...">
                                                    <i slot="suffix" class="iconfont iconyouxiang"></i>
                                                </el-input>
                                            </el-form-item>
                                             <el-form-item prop="code">
                                                <el-input v-model="form.code" placeholder="请设置新密码..." show-password>
                                                    <i slot="suffix" class="iconfont icon3"></i>
                                                </el-input>
                                            </el-form-item>
                                            <el-form-item  prop="yzm">
                                                <div style="position:static">
                                                    <el-input v-model="form.yzm" placeholder="验证码..." class="yzmInput" id="yzmInputId" style="width:300px">
                                                        <i slot="suffix" class="iconfont iconverify"></i>
                                                    </el-input>
                                                    <div style="position:absolute;top:0px;left:310px">
                                                        <identify></identify>
                                                    </div>
                                                </div>
                                            </el-form-item>
                                            <el-form-item >
                                                <button  class="btnNext pointer" @click="goToNext">下一步</button>
                                                <!-- <button v-show="!nextReady" class="btnNotNext pointer" disabled>下一步</button> -->
                                            </el-form-item>
                                        </el-form>
                        </div>
                    </div>
                </el-card>
            </el-main>
            <el-footer style="text-align: center;width: 100%;white-space: nowrap;color: #A7A7A7;font-size: 10px;line-height: 60px;">
				<div>www. xinzhitong. com版权所有新职通一新时期务工人员转 型升级助推者备案号粤ICP备10054973号-5</div>
			</el-footer>
        </el-container>
    </div>
</template>
<script>
export default {
    
    data(){
        //校验验证码正确
        var validateYzm = (rule, value, callback) => {  
            var yzm= sessionStorage.getItem('identify');
            // console.log(yzm);
            // console.log(value);        
            if (value === '') {
                callback(new Error('请输入验证码'));
            } else if (value !== yzm) {
                callback(new Error('验证码输入错误！'));
            } else {
                callback();
            }
        };
        return{
            activeStep:1,
            nextReady:false,
            form:{
                email:'',
                code:'',
                yzm:''
            },
            rules:{
                email:[
                    {
                         required: true,message: '请输入邮箱', trigger: 'blur'
                    }
                ],
                code:[
                    {
                         required: true,message: '请设置新密码', trigger: 'blur'
                    }
                ],
                yzm:[
                    {
                         validator: validateYzm,trigger:'blur'
                    }
                ]
            }
        }
    },
    watch:{
        // form:{
        //     handler:function(){
        //         this.$refs['form'].validate((valid) => {
        //             if (valid) {
        //                 console.log('yes');
        //                 this.nextReady=true;
        //             } else {
        //                 console.log('error submit!!');
        //                 this.nextReady=false;
        //             }
        //         });
        //     },
        //     deep:true
        // }
    },
    mounted(){
         var body = document.getElementById('loginMainBox');
			console.log(body)
			var height = document.documentElement.clientHeight - 120
			console.log(height.toString() + 'px')
			if(height<=700)
				height=700
			body.style.height = height.toString() + 'px'
			console.log(body.style.height)
    },
    methods:{
        goToNext(){
            this.$refs['form'].validate((valid) => {
                if (valid) {
                        console.log('forget ok');
                        var URL=this.IP+'/user/email';
                        console.log(URL);
                        this.$ajax({
                            method:'post',
                            url:URL,
                            params:{
                                emailType:'RESETPASSWORD',
                                targetType:'ORGAN'
                            },
                            data:{
                                username:this.form.email,
                                password:this.form.code
                            }
                        }).then(response=>{
                            console.log(response.data);
                            var code=response.data.code;
                            if(code==0){
                                this.$message({
                                    message: response.data.data,
                                    type: 'success'
                                });
                                this.$router.push({
                                    path:'/forgetStep2',
                                    query:{
                                        email:this.form.email,
                                        code:this.form.code
                                    }
                                })
                      
                            }else{
                                console.log(response.data.msg);
                                this.$message.error(response.data.msg);
                            }
                        }).catch(error=>{
                            console.log(error);
                            //Toast(error);
                        })
               
                } else {
                    console.log('error submit!!');
                }
            });
           
        }
    }
}
</script>
<style>
 /* .yzmInput .el-input {
    width: 300px;
} */
.yzmInput .el-input__inner {
    width:300px;
}
#loginMainBox{
    background-image: url(../../assets/login/loginbgi.jpg);
    background-size: cover;
}
.imgCol{
    display: flex;
    justify-content: center;
    align-items: center;
}
.pointer{
    cursor: pointer;
}
.btnNext{
    width: 400px;
    height: 40px;
    color: #FFF;
    background-color: #409EFF;
    border-color: #409EFF;
    border-style: none;
    border-radius: 5px;
}
.btnNotNext{
    width: 400px;
    height: 40px;
    color: #909399;
    background-color: #f4f4f5;
    border-color: #f4f4f5;
    border-style: none;
    border-radius: 5px;
}
</style>